<template>
	<view class="modular">
		<view class="headerBox">
			<view class="header">
				<view class="information">
					<view>
						<view><text>会员</text>：{{userInforDetail.realName}} </view>
						<view><text>填写日期</text>：{{userInforDetail && userInforDetail.updateTime && filterData2(userInforDetail.updateTime)}}</view>
					</view>
					<view>
						<view><text>性别</text>：{{userInforDetail && userInforDetail.sex == 1 ? '男' : '女'}} </view>
						<view><text>年龄</text>：{{userInforDetail && userInforDetail.age}}</view>
					</view>
					<view>
						<view><text>评估人</text>：{{userInforDetail && userInforDetail.healthName}}</view>
						<view><text>评估日期</text>：</view>
					</view>
				</view>
			</view>
			
			<view class="connectBox" v-show="!searchBarFixed">
				<image src="@/static/img/healthStatus/connect@2x.png"></image>
				<image src="@/static/img/healthStatus/connect@2x.png"></image>
			</view>
		</view>
		<view class="mainContent">
			<view class="specific">
				<image src="@/static/img/monitor/information/information@2x.png" class="title"></image>
				<view class="boxTwo">
					<view class="item">
						<text>身份证号</text>
						<view>{{userInforDetail.idCard  || '未填写'}}</view>
					</view>
					<view class="item">
						<text>姓名</text>
						<view>{{userInforDetail.realName  || '未填写'}}</view>
					</view>
					<view class="item">
						<text>性别</text>
						<view>{{userInforDetail.sex == 1 ? '男' : userInforDetail.sex == 2 ? '女' : '未知'}}</view>
					</view>
					<view class="item">
						<text>出生日期</text>
						<view>{{userInforDetail.birthday || '未填写'}}</view>
					</view>
					<view class="item">
						<text>年龄</text>
						<view>{{userInforDetail.age  || '未填写'}}</view>
					</view>
					<view class="item">
						<text>手机号</text>
						<view>{{userInforDetail.phone  || '未填写'}}</view>
					</view>
				</view>
			</view>
			<view class="specific">
				<image src="@/static/img/monitor/information/otherInformation@2x.png" class="title"></image>
				<view class="boxTwo">
					<view class="item">
						<text>民族</text>
						<view>{{userInforDetail.nation || '未填写'}}</view>
					</view>
					<view class="item">
						<text>工作单位</text>
						<view>{{userInforDetail.employer || '未填写'}}</view>
					</view>
					<view class="item">
						<text>紧急联系人</text>
						<view>{{userInforDetail.emergencyContactName || '未填写'}}</view>
					</view>
					<view class="item">
						<text>紧急联系人电话</text>
						<view>{{userInforDetail.emergencyContactPhone || '未填写'}}</view>
					</view>
					<view class="item">
						<text>血型</text>
						<view>{{userInforDetail.bloodGroup || '未填写'}}</view>
					</view>
					<view class="item">
						<text>文化程度</text>
						<view>{{userInforDetail.educationLevel || '未填写'}}</view>
					</view>
					<view class="item">
						<text>职业</text>
						<view>{{userInforDetail.occupation || '未填写'}}</view>
					</view>
					<view class="item">
						<text>婚姻状况</text>
						<view>{{userInforDetail.maritalStatus || '未填写'}}</view>
					</view>
					<view class="item">
						<text>医疗费用支付</text>
						<view>{{userInforDetail.medicalExpensesType || '未填写'}}</view>
					</view>
				</view>
			</view>
			<view class="specific">
				<image src="@/static/img/monitor/information/healthInformation@2x.png" class="title"></image>
				<view class="boxTwo">
					<view class="item">
						<text>药物过敏史</text>
						<view v-if="userInforDetail.drugAllergy">
							<text  v-for="(item,index) in userInforDetail.drugAllergy":key="index">{{item}}</text>
						</view>
						<view v-else>
							<text>无</text>
						</view>
					</view>
					<view class="item">
						<text>暴露史</text>
						<view v-if="userInforDetail.exposureHistory">
							<text  v-for="(item,index) in userInforDetail.exposureHistory":key="index">{{item}}</text>
						</view>
						<view v-else>
							<text>无</text>
						</view>
					</view>
					<view>
						<view class="item" v-for="(item,index) in userInforDetail.pastHistory" :key="'a'+index" style="display: unset;">
							<text>{{item.name}}</text>
							<div>
								<view v-for="(a,ai) in item.parameterValueRes && item.parameterValueRes" :key="ai" style="display: flex;">
									<view style="text-indent: 1em;">{{a.name}}</view>
									<view>{{a.value}}</view>
								</view>
							</div>
						</view>
					</view>
				</view>
			</view>
			<view class="specific">
				<image src="@/static/img/monitor/information/familyHistory@2x.png" class="title"></image>
				<view class="boxTwo">
					<view class="item" v-for="(item,aindex) in userInforDetail.familyHistory" :key="aindex">
						<text>{{item.name}}</text>
						<view>
							<text>{{(item.parameterValueRes && item.parameterValueRes.map((a)=>{return a.value}).join(',') || '无')}}</text>
						</view>
					</view>
					<view class="item">
						<text>遗传病史</text>
						<view>
							<text>{{userInforDetail.geneticDisease || '无'}}</text>
						</view>
					</view>
					<view class="item">
						<text>残疾情况</text>
						<view v-if="userInforDetail.disability">
							<text v-for="(item,index) in userInforDetail.disability":key="index">{{item.substr(0,item.length - 1)}}</text>
						</view>
						<view v-else>
							<text>无</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getUrlParam,filterData2,distance} from '@/static/js/filter.js';
	export default {
		data() {
			return {
				userInforDetail: {},
				searchBarFixed: false
			}
		},
		methods: {
			filterData2,
			distance,
		},
		onPageScroll() {
			this.searchBarFixed = this.distance('mainContent');
		},
		onLoad() {
			const id = getUrlParam('id');
			if(id) {
				this.$api.UserInfoDetails({id:id}).then((res) => {
					if(res.data.returnCode == '200') {
						this.userInforDetail = res.data.result;
						this.userInforDetail.updateTime = res.data.result.updateTime
						this.userInforDetail.disability = res.data.result.disability && res.data.result.disability.split(',').map((a)=>{return a+','});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/healthStatus/toView.scss';
	.boxTwo {
		height: 100%;
		background: #FFFFFF;
		border-radius: 24upx;
		padding: 44upx 0 0;
		.item {
			display: flex;
			line-height: 62upx;
			color: #333333;
			font-size: 30upx;
			text{
				width: 280upx;
			}
			view {
				flex: 2;
			}
		}
	}
</style>
